<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部组织架构 -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 放置架构内容 -->
        <!-- el-row是行布局标签 -->
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 放置一个<el-tree></el-tree> -->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 传入插槽内容   插槽内容会循环多次  有多少节点循环多少次 -->
          <!-- 作用域插槽  slot-scope="obj" 接收传递给插槽的数据   data就是循环出来的每个节点的数据对象-->
          <tree-tools slot-scope="{data}" :tree-node="data" @addDepts="addDepts" @editDepts="editDepts" @delDepts="getDepartments" />
          <!-- 子组件删除数据后父组件自定义事件调用获取部门架构重新布局 -->
        </el-tree>
      </el-card>
    </div>
    <!-- 放置新增弹层组件 -->
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>
<script>
import treeTools from './components/tree-tools.vue'// 引入组织架构组件
import { getDepartments } from '@/api/departments.js' // 引入获取组织架构数据api接口
import { tranListToTreeData } from '@/utils/index.js'// 引入遍历表型结构转换树形结构方法
import AddDept from './components/add-dept.vue'
export default {
  name: 'DepartmentsIndex', // 组件名称
  components: { // 注册组件
    treeTools, AddDept
  },
  filters: {// 局部过滤器
  },
  props: {// 父传递数据
  },
  data () { // 数据变量
    return {
      company: { }, // 头部的结构
      departs: [],
      // defaultProps告诉组件要去哪个属性里面找子节点
      defaultProps: {
        label: 'name', // 表示从这个属性去显示内容
        children: 'children'// 从这个属性去找子节点
      },
      showDialog: false, // 控制弹出层显示隐藏，默认是隐藏的
      node: null// 记录当前点击的node节点
    }
  },
  computed: {// 计算属性
  },
  watch: {// 事件侦听
  },
  activated () { // 组件激活时调用的函数
  },
  created () { // data数据加载完毕执行函数
    this.getDepartments()// 调用自身方法
  },
  mounted () { // DOM首次加载完毕时执行的函数
  },
  updated () { // 数据更新时执行的函数,执行多次
  },
  methods: { // 函数定义
  // 获取组织架构数据方法
    async getDepartments () {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }// 通过获取后台真实数据来修改组织架构头部内容
      this.departs = tranListToTreeData(result.depts, '') // 这样直接写的话显示扁平化，需要的是金字塔树形结构
      // console.log(tranListToTreeData(result.depts, ''))
    },
    // 修改showDialog为true显示弹出层  监听tree-tools中触发的点击新增弹出层显示
    addDepts (node) { // 这个接受的noed是当前点击的部门，要在他里面去新增子部门
      this.showDialog = true// 显示弹层
      this.node = node
    },
    // 点击编辑部门信息方法
    editDepts (node) {
      this.showDialog = true// 显示弹层
      this.node = node// 两个可以一起用，因为不可能存在同时点击新增和编辑
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }

}
</script>
<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
